<template>
  <div class="bottom-tabbar">
    <div class="place-bar-box">
      <div class="bar-ele" style="height: 116rpx"></div>
      <div :style="{ height: bottomSafeArea + 'px' }"></div>
    </div>
    <div class="tabbar-box">
      <div class="tabbar-wrapper wrap">
        <div
          class="tabbar-item"
          v-for="(item, index) in tabbarList"
          :key="index"
          :class="{ active: index == currentPage }"
          @click="changeTab(index)"
        >
          <div class="tabbar-item-line">
            <div class="top-line"></div>
            <div class="bottom-line"></div>
          </div>
          <div class="tabbar-item-text">
            {{ item.text }}<br />
            {{ item.en }}
          </div>
        </div>
      </div>
      <div :style="{ height: bottomSafeArea + 'px' }"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex"
import {
  computed,
  ref,
  reactive,
  onMounted,
  defineProps,
  defineEmits,
} from "vue"

const emit = defineEmits(["change"])
const props = defineProps({
  currentPage: {
    type: Number,
    default: 0,
  },
})
const store = useStore()
const tabbarList = reactive([
  {
    text: "首页",
    en: "Homepage",
  },
  {
    text: "展览",
    en: "Exhibition",
  },
  {
    text: "商店",
    en: "Shop",
  },
  {
    text: "个人",
    en: "Account",
  },
])
const bottomSafeArea = computed(() => store.getters["system/bottomSafeArea"])

const changeTab = (index: number) => {
  console.log("首页获取传参", index)
  emit("change", index)
}
</script>

<style lang="scss">
@import "./tabbar.scss";
</style>
